<template>
	<view :style="'padding: 10px;background: '+data.b_color+';borderRadius:4px;'" v-if="data.content">
		<view v-if="data.show_name==1">
			<view style="text-align: center;font-weight: bold;color: #555;">{{data.name}}</view>
			<view style="text-align: center;font-size: 12px;color: #666;margin: 10px 0;" v-if="data.desc&&data.desc.length">
				{{data.desc}}
			</view>
			<view style="margin: 10px 0;">
				<u-line></u-line>
			</view>
		</view>
		<view >
			<moxi-form :color="color" v-for="(list,key) in data.content" :input="list" v-model="data.content[key].value"></moxi-form>
			<moxi-form :color="color" :input="codeInput" v-model="phone" v-if="data.code==1"></moxi-form>
		</view>
		<view style="text-align: center;display: flex;align-items: center;justify-content: center;margin-top: 10px;">
			<view class="btn" @click="submit" :style="{
				background:data.btn_color,
			borderRadius:data.btn_radius+'px',
			boxShadow:data.btn_shadow==1?'0 5px 10px 0 rgba(198, 203, 218, 0.8)':''
			}">{{data.btn_name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"plugin-form",
		data() {
			return {
				data:{},
				color:"",
				phone:"",
				code:"",
				codeInput: {
					  	  name:"验证码",
					  	  type:"code",
					  	  must:1,
					  	  desc:"请输入手机号码",
					  	  value:'',
					   },
			};
		},props:{
			set:{
				type:Object,
				default(){
					return {
						form_id:'',
						
					}
				}
			}
		},
		created() {
			if(this.set.form_id){
			this.moxiPost("/plugin/form/index/info/get_form",{form_id:this.set.form_id},(data)=>{
						   this.color = data.data.color;
						   this.btn_color = data.data.btn_color;
						   this.$set(this,'data',data.data)
					   },false)
			}
		},
		methods:{
			submit(){
				let param = {};
				for(let k in this.data.content){
					param[this.data.content[k].id] = this.data.content[k].value;
				}
				if(this.data.code==1){
					if(!this.$appData.code.length){
						this.msg("请输入验证码");
						return;
					}
					param.phone = this.phone;
					param.code = this.$appData.code;
				}
				console.log({form_id:this.set.form_id,param:param});
				this.moxiPost("/plugin/form/index/info/submit",{form_id:this.set.form_id,param:param},(data)=>{
					this.msg(data.hint)
				})
				
			}
		}
	}
</script>

<style>
.btn{
	padding: 8px 15px;width: 60%;color: #fff;margin: 5px 0;
}
</style>